<template>
  <div class="home-cont" v-if="jdata">
    <div :class="['job-item', { hot: isHot }]">
      <div class="flex justify-between align-center">
        <div class="brand flex align-center">
          <img :src="jdata.brandLogo" alt="" />
          {{ jdata.brandName }}
        </div>
        <i class="iconfont icon-bookmark-o fs-30"></i>
      </div>
      <h2 class="fs-28">{{ jdata.jobName }}</h2>
      <p class="fs-22">{{ jdata.cityName }} · {{ jdata.areaDistrict }}</p>
      <div class="mt-10" v-if="!isHot">
        <van-tag mark type="warning" v-for="item in jdata.welfareList">
          {{ item }}
        </van-tag>
      </div>
      <div
        class="fs-22 flex justify-between align-center"
        :class="isHot ? 'mt-30' : 'mt-10'"
      >
        <div>
          <i class="iconfont"></i>
          {{ jdata.salaryDesc }}
        </div>
        <span v-if="!isHot">{{ jdata.jobDegree }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isHot: {
      type: Boolean,
      default: false,
    },
    jdata: {
      required: true,
    },
  },
};
</script>

<style lang="scss" scoped>
// .job-item.hot{}
.home-cont {
  padding-bottom: 6rem;
}
.job-item {
  //   height: 29.2rem;
  padding: 3.2rem;
  box-sizing: border-box;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  &.hot {
    width: 34.4rem;
  }
  .brand {
    font-size: 2.4rem;
    img {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
    }
  }
  .fs-28 {
    margin: 3rem 0;
  }
  .loc {
    margin-bottom: 4rem;
  }
}
.van-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
